<template>
  <div class="context-menu" :style="{ top: `${position.y}px`, left: `${position.x}px` }">
    <div @click="handleContextMenu('remark')" class="menu-item">备注</div>
    <div @click="handleContextMenu('urgent')" class="menu-item">加急</div>
    <div @click="handleContextMenu('black')" class="menu-item">拉黑</div>
  </div>
</template>

<script>
export default {
  props: {
    position: Object,
    row: Object, // 点击行的数据
  },
  methods: {
    handleContextMenu(action) {
      // 发出事件，向父组件指示所选择的操作
      this.$emit('context-menu-action', action, this.row);
    },
  },
};
</script>

<style scoped>
.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 999;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.menu-item {
  cursor: pointer;
  padding: 5px;
  user-select: none;
  transition: background-color 0.3s; /* 添加过渡效果 */
}

.menu-item:hover {
  background-color: lightgray; /* 鼠标悬停时的背景颜色 */
}
</style>
